<template>
  <ACollapsePanel
    :key="key"
    :show-arrow="showArrow"
    :force-render="forceRender"
    :header="header"
    :extra="extra"
    :collapsible="collapsible"
  >
    <slot />
    <template v-if="$slots.header" #header>
      <slot name="header" />
    </template>
    <template v-if="$slots.extra" #extra>
      <slot name="extra" />
    </template>
  </ACollapsePanel>
</template>

<script>
import { CollapsePanel } from 'ant-design-vue'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ZCollapsePanel',
  components: {
    ACollapsePanel: CollapsePanel
  },
  props: {
    key: {
      type: [String, Number],
      default: undefined
    },
    showArrow: {
      type: Boolean,
      default: true
    },
    forceRender: {
      type: Boolean,
      default: false
    },
    header: {
      type: String,
      default: undefined
    },
    extra: {
      type: Function,
      default: undefined
    },
    collapsible: {
      type: String,
      default: undefined
    }

  }
})
</script>

<style>

</style>
